<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>易维--工单系统</title>
    <link href="static/user/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/user/css/a3common.css" rel="stylesheet">
    <link rel="stylesheet" href="static/user/css/login.css">
    <link rel="stylesheet" href="static/user/css/font_43459_lbtux0zjkr6yldi.css">
    <style>
        .error{
            color: red;
            margin-left: 0;
        }
    </style>
</head>
<body>
<div id="main" class="main-warp">
    <div class="main-content">
        <div class="formDiv">

            <h2 class="text-center">欢迎您的登录使用</h2>

            <form id="loginForm" method="post">
                <div class="dataform">
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-yonghu1"></span>
                        <input id="loginName" name="loginName" type="text" class="inputs" placeholder="请输入手机号码"
                               maxlength="64" value="${cookie.loginName.value}">
                    </div>
                    <div class="error-content">
                        <span id="loginNameErr" class="errMsg"></span>
                    </div>

                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-baomi"></span>
                        <input class="inputs" type="password" name="password" placeholder="请输入密码" id="password"
                               maxlength="20" value="${cookie.password.value}">
                    </div>
                    <div class="error-content">
                        <span id="passwordErr" class="errMsg" style=""></span>
                    </div>

                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-xuanzeshuju"></span>
                        <span class="inputs" style="font-size: 15px">
                           <label for="user" >用户<input id="user" type="radio" name="state" value="0" checked></label>
                           <label for="staff">管理员<input id="staff" type="radio" name="state" value="1" ></label>
                        </span>
                    </div>
                </div>
                <div class="error-content">
                    <span id="stateErr" class="errMsg" style=""></span>
                </div>


                <div class="btn-warp gap">
                    <div class="text-center">
                        <input type="hidden" value="jsform" id="_app"/>
                        <button type="submit" id="btnLogin" class="btn btn-block lgbtn blue">登录</button>
                    </div>
                </div>
                <div class="gap">
                    <div class="pull-right" style="margin-top: 6px"></span><a href="register.jsp" class="link">新用户注册</a>
                    </div>
                    <div class="pretty-box">
                        <input type="checkbox" value="1" name="isKeep" id="remember" class="">
                        <label for="remember" style="font-weight: normal">记住我</label>
                    </div>
                </div>

                <div class="biggap third-party-title">
                    <h5 class="text-center"><span>第三方账号登录</span></h5>
                </div>
                <div class="third-auth">
                    <a title="用钉钉登录" class="dt" href="javascript:;"></a>
                    <a title="用微信账户登录" class="wx" href="javascript:;"></a>
                    <a title="用QQ账户登录" class="qq" href="javascript:;"></a>
                </div>
        </div>
        </form>
    </div>
</div>
</div>
<script src="static/js/jquery3.4.1.js"></script>
<script src="static/js/jquery.validate.min.js"></script>
<script src="static/js/jquery.serializejson.min.js"></script>
<script src="static/layer/layer.js"></script>
<c:if test="${staffloginFail || userloginFail}">
    <script>
        alert("请先登录帐号！！！");
    </script>
</c:if>
<!--初始化-->
<script>

    window.onload = function () {
        let isStaff = "${cookie.isStaff.value}";
        let isUser = "${cookie.isUser.value}";
        if(isStaff != ""){
            $("#remember").prop("checked",true);
            $("#user").prop("checked",false);
            $("#staff").prop("checked",true);
        }else if(isUser != ""){
            $("#remember").prop("checked",true);
            $("#user").prop("checked",true);
            $("#staff").prop("checked",false);
        }
    }
</script>
<!--表单验证-->
<script>
    $("#loginForm").validate({
        rules: {
            loginName:{
                required:true
            },
            password:{
                required: true
            }
        },
        messages: {
            loginName:{
                required:"请输入手机号码"
            },
            password:{
                required: "请输入密码"
            }
        },
        errorPlacement: function(error, element) {
            error.appendTo(element.parent("div").next());
        },
        submitHandler:function (form) {
            let data = $(form).serialize();
            console.log(data);
            let state = "0";
            console.log($("#user").prop("checked"));
            if($("#user").prop("checked")){
                state = "0";
            }else {
                state = "1";
            }
            if(state == "0"){   //用户登录
                $.ajax({
                    url:"${pageContext.request.contextPath}/user/login.handler",
                    data: data,
                    success:function (data) {
                        console.log(typeof data,data);
                        if(data.state == "0"){
                            layer.msg('帐号密码错误,请您检查并重新填写', {icon: 2});
                        } else if(data.state == "1"){
                            layer.msg('登录成功!正在进入主界面......', {icon: 1},function () {
                                $(form)[0].reset();
                                window.location.href = "${pageContext.request.contextPath}/userPage/home.handler";
                            });
                        }else if(data.state == "2"){
                            layer.msg('该用户正在审核中,请您稍等,您也可以拨打电话123456联系相关人员加快审核进度....', {icon: 2});
                        }else if(data.state == "3"){
                            layer.msg('该用户审核失败！！请拨打电话123456联系相关人员....', {icon: 2});
                        }
                    }
                });
            }else if(state == "1") {
                $.ajax({
                    url:"${pageContext.request.contextPath}/staff/login.handler",
                    data: data,
                    success:function (data) {
                        console.log(typeof data,data);
                        if(data.state){
                            layer.msg('登录成功!正在进入主界面......', {icon: 1},function () {
                                $(form)[0].reset();
                                window.location.href = "${pageContext.request.contextPath}/staffPage/home.handler";
                            });
                        }else{
                            layer.msg('帐号密码错误,请您检查并重新填写', {icon: 2});
                        }
                    }
                });
            }
        }
    });

    //手机号验证规则
    jQuery.validator.addMethod("isPhone", function(value, element) {
        var length = value.length;
        var phone_number = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
        return this.optional(element) || (length == 11 && phone_number.test(value));
    }, "请输入正确的手机号码");
</script>
</body>
</html>
